<template>
    <div>
      <Banner></Banner>
      <div class="box">
        <div class="link">
          <!-- 可加入replace将上一步历史记录 默认为push， -->
        <router-link replace to="/about" class="link_href" active-class="active">About</router-link>
        <router-link to="/home" class="link_href" active-class="active">Home</router-link>
      </div>
      <router-view class="route"></router-view>
    </div>
      </div>
      
</template>

<script>

import Banner from './components/Banner'
export default {
  name:'App',
  components:{Banner}
}
</script>

<style scoped>
  .link{
    display:flex;
    /* background-color: skyblue; */
    width: 60px;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
    margin-right: 20px  ;
  }
  .link_href{
    margin-top: 10px;
    border: 2px solid green;
    border-radius: 10px;
    text-decoration: none;
    color:black;
    text-align: center;
  }
  .link_href:active{
    background-color: skyblue;
  }
  .active{
    background-color: skyblue;
  }
  .box{
    display:flex;
    /* background-color: lightgreen; */
    width:fit-content;
  }

</style>